<template>
	<view>
		<view class="main">
			<view :class="goods_class" v-if="list && list.length > 0">
				<block v-for="(item,index) in list">
					<view class="goods-box">
						<view class="img-box">
							<block v-if="item && item.img">
								<image class="logo" :src='item.img' v-if="item.img" lazy-load="true" mode="aspectFit">
								</image>
							</block>
							<view v-else class='iconfont icon-zanwutupian'></view>
						</view>
						<view class="info-box">
							<view class="goods-name">
								<view  style="font-weight: bold;font-size: 34rpx;" v-if="item.name">{{item.name}}</view>
							</view>
							
							<view class="goods-time" style="font-weight: bold;font-size: 34rpx;" >
								<text>用餐日期：</text>
								<text >{{date.month}}月{{date.day}}日 {{date.weekName}}</text>
							</view>
							<view class="goods-name">
								<view  style="font-weight: bold;font-size: 30rpx;" v-if="item.food">{{item.food}}</view>
							</view>
							<view class="goods-time" style="color: #999;">
								<text>报餐时间：</text>
								<text>{{item.before_day > 0 ? '提前'+item.before_day+'天':'当天'}}{{item.end_time}}前</text>
							</view>
							
							<view class="shop-name" style="color: #999;" v-if="item.shop_name">食堂：{{item.shop_name || ''}}</text></view>
							<view v-if="item.price" class="price-box">
								<text class="price">￥</text>
								<text>{{item.price}}</text>
							</view>
							<view class="info-box-btn">
								<view class=" btn" @click="check(item)" v-if="item.order_num>=1">查看餐票</view>
								<view class=" btn" @click="take(item,index)">立即报餐</view>
								<!-- <view class=" btn" @click="take(item,index)"
									v-if="item.is_accept==1">再报一份</view>	 -->
							</view>
						</view>
					</view>
				</block>
				<!-- <uni-load-more :status='status'></uni-load-more> -->
			</view>
		</view>
		<jhxChangeNum ref='mealNum' :detail='item' @changNum='changNum'></jhxChangeNum>
		<view :class="show_deatil ? '' : 'hide'">
			<view class="deail-main">
				<view class="deail-content">
					<view class="detail-title">
						<uni-icons type="checkbox" size="50" color="#00B700"></uni-icons>
						<view>报餐成功</view>
					</view>
					<view class="detail">
						<!-- <view class="detail-cel" v-if="detail.log.shop_name">
							<text class="lable">饭堂：</text>
							<text>{{detail.log.shop_name}}</text>
						</view>
						<view class="detail-cel">
							<text class="lable">用餐人：</text>
							<text>{{detail.username}}</text>
						</view> -->
						<view class="detail-cel">
							<text class="lable">用餐地点：</text>
							<text>{{detail.log.is_waimai == 1 ? '外送' : '堂食'}}</text>
						</view>
						<view class="detail-cel">
							<text class="lable">价格(元)：</text>
							<text>{{detail.log.price}}</text>
						</view>
						<view class="detail-cel" v-if="detail.order_num">
							<text class="lable">待使用份数：</text>
							<text class="label-weight" style="color: #007AFF;">{{detail.order_num - detail.checkout_num }}份</text>
						</view>
						<view class="detail-cel">
							<text class="lable">餐名：</text>
							<text class="label-weight">{{detail.name}}</text>
						</view>
						<view class="detail-cel">
							<text class="lable">使用时间：</text>
							<text class="label-weight use-time">{{detail.log.created_at | time}}</text>
						</view>
						<view class="qrimg">
						    <tki-qrcode
						    ref="qrcode"
						    :val="userCard"
							:usingComponents="true"
							:showLoading="false"
							:onval="true"
							:size="300"
							:show="true"
							@result="qrResult">
							</tki-qrcode>
							<!-- <view style="">取餐二维码</view> -->
						</view>
						<view>
							<view class="printer" @click="hideDetail">知道了</view>
							<!-- <view class="printer-tips">请确保您已在食堂打印机旁边再打印</view> -->
						</view>
					</view>
				</view>
				<view class="close-btn"  @click="hideDetail">
					<view class="iconfont icon-guanbi"></view>
				</view>
			</view>
			<view class="maskLayer" @click="hideDetail"></view>
		</view>
	</view>

</template>

<script>
	import {
		orderMenu,orderCreate
	} from '@/api/baocan.js';
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue";
	import moment from '@/utils/moment';
	import jhxChangeNum from '@/components/jhx-baocan/change-num.vue'
	/**
	 * JhxProductList 商品列表
	 * @description 商品列表组件
	 */
	export default {
		components: {
			jhxChangeNum,
			tkiQrcode
		},
		name: 'jhxOrderMeal',
		props: {
			
		},
		data() {
			return {
				goods_class: 'goods-list__1',
				show_deatil:false,
				detail:{
					log:{}
				},
				list:[],
				item:{
					date:''
				},
				index:0,
				date:{},
				userCard:''
			}
		},
		created() {
			var user = uni.getStorageSync('user');
			if(user){
				this.userCard = user.member.card_number;
			}
		},
		onReady() {
			
		},
		watch:{
			is_refresh(val){
				console.log(val);
				this.list=[];
			}
		},
		beforeDestroy() {

		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD')
			},
			//
			toInt(val) {
				return helper.toInt(val);
			}
		},
		methods: {
			//菜系
			getList(date) {
				this.date= date;
				var param = {
					date:this.date.year+"-"+this.date.month+"-"+this.date.day
				};
				
				var that=this;
				this.$data.recomandStatus = 'loading';
				uni.showLoading({
					title:'加载中...'
					
				});
				
				this.$http
					.get(`${orderMenu}`, {
						...param
					})
					.then(async data => {
						uni.hideLoading();
						if(data.code==200){
							that.$data.list = data.data;
							var success=true;
							that.$emit('is_success',success);
							// if (data._meta.pageCount <= that.page) {
							// 	that.$data.recomandStatus = 'noMore'
							// } else {
							// 	that.$data.recomandStatus = 'more'
							// }
						}else{
							uni.showToast({
								title:data.errmsg ? data.errmsg : '失败！',
								icon:'none'
							})
						}
					}).catch(() => {
						uni.hideLoading();
					});
			},
			//
			take(item,index) {
				this.item=item;
				this.index=index;
				this.$refs.mealNum.open(this.date);
			},
			changNum(e){
				console.log(e);
				this.orderMeal(e);
			},
			//报餐
			orderMeal(param) {
				var that = this;
				var param = {
					type: this.item.type,
					num:param.num,
					date:this.date.year+"-"+this.date.month+"-"+this.date.day,
					is_waimai:param.useType,
					addr:'',
					station_id:''
				};
				uni.showLoading({
					title:'报餐中...'
				});
				this.$http
					.post(`${orderCreate}`, {
						...param
					})
					.then(async data => {
						uni.hideLoading();
						if (data.code == 200) {
							that.list[that.index].is_accept=1;
							that.detail=that.item;
							that.detail.log=data.data.data;
							that.show_deatil=true;
						} else {
							uni.showToast({
								title: data.msg ? data.msg : '报餐失败！',
								icon: 'none'
							})
						}
					})
			},
			//报餐记录
			check(item) {
				var that = this;
				that.detail=item;
				this.show_deatil=true;
				this.$refs.qrcode._makeCode();
			},
			hideDetail(){
				this.$emit('success',true);
				this.show_deatil=false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.main {
		// background-color: #f9f9f9;
	}

	/*商品列表  */
	.goods-box {
		background-color: #fff;
		position: relative
	}

	.goods-box image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333;
/* 
		height: 68rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden; */
		margin-bottom: 20rpx;
	}

	.goods-name view {
		line-height: 34rpx;
	}

	.goods-time {
		font-size: 28rpx;
		margin-bottom: 20rpx;
		color: #333;
	}

	.goods-time .iconfont {
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	.shop-name{
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 20rpx;
		color: #ff6600;
	}

	.info-box-btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100rpx;
		margin-top: 20rpx;
	}

	.info-box-btn-r {
		padding: 20rpx 0rpx;
	}

	.btn {
		background: #ff6600;
		color: #fff;
		font-size: 28rpx;
		padding: 15rpx 30rpx;
		border-radius: 60rpx;
		margin: 10rpx;
	}

	/*商品展示一列  */
	.goods-list__1{margin: 0 2%;}
	.goods-list__1 .goods-box {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		justify-content: space-between;
		margin-bottom: 40rpx;
		border-radius: 20rpx;
	}

	.item-border {
		// border-bottom: 2rpx solid #eee;
	}

	.goods-list__1 .goods-box image {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.goods-list__1 .small image {
		width: 170rpx;
		height: 170rpx;
		margin-right: 20rpx;
	}

	.goods-list__1 .goods-box .info-box {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		min-height: 200rpx;
	}

	.goods-list__1 .sold-out-content {
		padding-top: 50rpx;
		left: 50rpx;
		top: 45rpx;
	}

	.icon-zanwutupian {
		font-size: 200rpx;
		color: #f1f1f1;
		align-self: center;

	}

	.price-box {
		color: #FF6600;
		font-weight: bold;
	}

	.price-box .price {
		font-size: 24rpx;
	}
	
	//订餐详情
	.deail-main {
		margin: 20rpx 5%;
		width: 90%;
		position: fixed;
		top: 5%;
		z-index: 999;
	}
	.deail-content{
		background-color: #fff;
		border-radius: 20rpx;
		padding:30rpx 0 60rpx 0;
		line-height: 40rpx;
		font-size: 28rpx;
		color: #333333;
	}
	.close-btn{
		color: #fff;
		margin-top: 40rpx;
		text-align: center;
	}
	.close-btn .iconfont{font-size: 68rpx;}
	
	.detail-title .iconfont {
		margin-right: 20rpx;
		    font-size: 68rpx;
		    margin-bottom: 40rpx;
	}
	
	.detail-title {
		text-align: center;
		font-size: 42rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
		color: #00B700;
		padding: 0rpx 0 30rpx;
		border-bottom: 2rpx solid #EEEEEE;
	}
	
	.detail {
		width: 90%;
		margin: auto;
		line-height: 50rpx;
	}
	
	.detail-cel {
		display: flex;
		justify-content: space-between;
		line-height: 48rpx;
	}
	
	.lable {
		color: #999999;
		width: 30%;
	}
	
	.label-weight {
		color: #FF0000;
		font-size: 32rpx;
	}
	.use-time{font-size: 48rpx;}
	.back-btn{
		width: 80%;
		text-align: center;
		/* background: #fff; */
		margin: auto;
		padding: 20rpx;
		border-radius: 40rpx;
		border: 2rpx solid #ff6600;
		color: #ff6600;
	}
	.printer{background-color:#ff6600 ;margin-top: 30rpx;padding: 25rpx 0; text-align: center;color: #fff;border-radius: 60rpx;font-size: 30rpx;}
	.printer-tips{text-align: center;color: red;margin-top: 10rpx;}
	.hide{display: none;}
	.qrimg{text-align: center;margin-top: 20rpx;}
</style>
